<div class="map-Edit-Tools btn-toolbar">

	<div role="tabpanel">

		<!-- Nav tabs -->
		<ul class="nav nav-tabs" role="tablist">
			<li role="presentation" class="active"><a href="#edit" aria-controls="edit" role="tab" data-toggle="tab" class="editToolLink" id="editLink">Edit</a></li>
			<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab" class="editToolLink" id="importLink">Import</a></li>
			<li role="presentation"><a href="#advanced" aria-controls="advanced" role="tab" data-toggle="tab" class="editToolLink" id="advancedLink">Advanced</a></li>
			<li role="presentation"><a href="#minimizeToolbar" aria-controls="minimizeToolbar" role="tab" data-toggle="tab" class="editToolLink"><span class="glyphicon glyphicon-arrow-down"></span></a></li>
		</ul>

		<!-- Tab panes -->
		<div class="tab-content">
			<div role="tabpanel" class="tab-pane active" id="edit">
				<button class="btn btn-primary">
					<span class="glyphicon glyphicon-floppy-save"></span> Save
				</button>

				<button class="btn btn-success" id="drawButton">
					<span class="glyphicon glyphicon-pencil"></span> Draw
				</button>

				<button class="btn btn-primary" style="background-color: #2f9426;">
					<span class="glyphicon glyphicon-edit"></span> Edit
				</button>

				<button class="btn btn-primary" style="background-color: #0bb7de;">
					<img src="finalministry/icons/cut.png" width="32" style="filter: invert(100%);" /> Cut
				</button>

				<button class="btn btn-primary" style="background-color: #0da0fc;">
					<span class="glyphicon glyphicon-wrench"></span> Automatic
				</button>

				<button class="btn btn-primary" style="background-color: #0b94de;">
					<span class="glyphicon glyphicon-tag"></span> Tag
				</button>

				<ul class="dropdown-menu" role="menu">
					<li><a href="#">Territory</a></li>
					<li><a href="#">Dropdown link</a></li>
				</ul>
			</div>
			<div role="tabpanel" class="tab-pane" id="profile">
				<button class="btn btn-primary" style="background-color: #0b94de;">
					<span class="glyphicon glyphicon-import"></span> Import
				</button>
			</div>
			<div role="tabpanel" class="tab-pane" id="advanced">
				<h4 style="color: #fff">SQL:</h4>
				<p style="color: #fff">Select geometry data in the first column. Additional info begins with the second column.</p>
				<div id="sqlDiv">
					<textarea id="sqlTextarea" rows="16" cols="98" style="font-family: Courier; background-color: rgba(255, 255, 255, 0.75)">SELECT ST_AsText(GEOMETRY) FROM OSM_WAY WHERE ST_CONTAINS(ST_GEOMFROMTEXT('#LASTPOLYGON#',4326),GEOMETRY)</textarea>
				</div>
				<p>
					<button id="executeQueryButton" class="btn btn-primary">Execute Query</button>
					<button id="clearAllFeaturesButton" class="btn btn-warning">Clear all features</button>
				</p>
				<p style="color: #fff">Use the GeoDB commands for analysing spatial data. The last polygon you have draw will be replaced inside the SQL for the keyword #LASTPOLYGON#.</p>
			</div>
			<div role="tabpanel" class="tab-pane" id="minimizeToolbar"></div>
		</div>

	</div>

</div>


<script type="text/javascript">
	//Init Tabs
	$(function() {
		$('.nav-tabs a').on('click', function(e) {
			e.preventDefault();
			$(this).tab('show');
		});
	});

	$('#editLink').click(function() {
		$('#editTool').css("height", "40px");
	});

	$('#importLink').click(function() {
		$('#editTool').css("height", "400px");
	});

	$('#advancedLink').click(function() {
		$('#editTool').css("height", "530px");
	});


	var lastPolygonDrawn = null;

	FMap.drawEndCallbackFunction = function(e) {
		e.preventDefault();
		map.removeInteraction(draw);
		draw = null;
		areas.push(featureOverlay);

		var index;
		var coordinatesArray = featureOverlay.getFeatures().getArray()[0]
				.getGeometry().getCoordinates()[0]
		var polygon = "POLYGON ((";

		for (index = 0; index < coordinatesArray.length; ++index) {
			polygon = polygon + coordinatesArray[index][0] + " "
					+ coordinatesArray[index][1];
			
			if (index + 1 < coordinatesArray.length) {
				polygon += ",";
			}
		}

		polygon = polygon + "))";

		lastPolygonDrawn = polygon;
		
		console.log(polygon);

		console.debug(featureOverlay.getFeatures().getArray()[0].getGeometry());
		console.debug(featureOverlay.number);
		console.debug(featureOverlay.city);
	};

	$("#drawButton").click(
			function() {
				var colorSelector = document.getElementById('colorSelected');
				var selectedColor = colorSelector.style.backgroundColor
						.replace(")", ",0.5)").replace("rgb", "rgba");
				FMap.startDraw(map, selectedColor);
			});

	// Developer Mode - Advanced Tab
	$('#executeQueryButton').click(
			function() {
				var sql = $('#sqlTextarea').val();
				sql = sql.replace("#LASTPOLYGON#",lastPolygonDrawn);
				console.log(sql);

				var request = $.ajax({
					type : 'POST',
					url : 'developer/executeSQL',
					data : JSON.stringify({
						sql : sql,
						note : $('#note').val()
					}),
					contentType : 'application/json'
				});

				request.done(function(msg) {

					// Insert data into the map, by color choosed by the user
					var colorSelector = document
							.getElementById('colorSelected');
					var result = jQuery.parseJSON(msg);
					result.result.forEach(function(entry) {

						//console.log("ENTRY= " + entry);
						try {
							if (entry.indexOf("POLYGON") > -1
									|| entry.indexOf("POINT") > -1
									|| entry.indexOf("LINESTRING") > -1) {
								FMap.insertFeaturesFromText(entry,
										colorSelector.style.backgroundColor);
							}
						} catch (e) {
						}

					});

				});
				request.fail(function(jqXHR, textStatus) {
					console.log('Request failed: ' + textStatus);
				});

			});

	$('#clearAllFeaturesButton').click(function() {
		FMap.clearInsertedFeatures();
	});
</script>